<template>
	<!-- 用户名验证码登录 -->
	<el-form class="login-form" ref="loginForm" :model="loginForm" :rules="loginRules" auto-complete="on" label-position="left">
		<el-form-item prop="username" :class="{inputFocus:inputFocus1}">
			<span class="svg-container">
			  <svg-icon icon-class="user" />
			</span>
			<el-input
			  ref="username"
			  v-model.trim="loginForm.username"
			  placeholder="手机号"
			  name="username"
			  type="text"
			  tabindex="1"
			  auto-complete="on"
			  @focus="inputFocus1 = true"
			  @blur="inputFocus1 = false"
			/>
		</el-form-item>
		<el-form-item prop="code" :class="{inputFocus:inputFocus2}" style="width: 62%;">
			<span class="svg-container" style="padding: 4px 5px 8px 15px;">
				<svg-icon icon-class="code"/>
			</span>
			<el-input
				ref="code"
				v-model.trim="loginForm.code"
				placeholder="验证码"
				name="code"
				type="text"
				tabindex="1"
				auto-complete="on"
				maxlength="6"
				@focus="inputFocus2 = true"
				@blur="inputFocus2 = false"
				style="width: 73%;"
			/>
			<button class="getCode" @click.stop="getCode" :disabled="codeDisabled">{{btntxt}}</button>
		</el-form-item>
		<div class="center-box">
			<vPuzzle :on-success="test" width="260" height="120"></vPuzzle>
		</div>
		<!-- <el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;margin-top: 20px;padding: 14px 20px;background: #6dcdb0;border: 1px solid #6dcdb0;" @click.native.prevent="handleLogin">{{ $t('login.logIn') }}</el-button> -->
	</el-form>
</template>

<script>
	import { Message } from 'element-ui';
	import vPuzzle from '@/views/login/components/puzzle'
	import { smsMobile } from '@/api/user' //调用模块接口
	export default {
		components: {vPuzzle},
		data() {
		  const validateUsername = (rule, value, callback) => {
				if (value == '') {
					Message({
					  message: '请输入账号',
					  type: 'error',
					  duration: 5 * 1000
					})
				} else {
					callback()
				}
		  }
			const validateCode = (rule, value, callback) => {
				if (value == '') {
					Message({
					  message: '请输入验证码',
					  type: 'error',
					  duration: 5 * 1000
					})
				} else {
					callback()
				}
			}
		    return {
				loginForm: {
					username: '',
					code: ''
				},
				codeDisabled:false,
				btntxt:'发送验证码',
				loginRules: {
					username: [{ required: true, trigger: 'submit', validator: validateUsername }],
					code: [{ required: true, trigger: 'submit', validator: validateCode }]
				},
				loading: false,
				redirect: undefined,
				inputFocus1: false,
				inputFocus2: false
			}
		},
		watch: {
			$route: {
				handler: function(route) {
					this.redirect = route.query && route.query.redirect
				},
				immediate: true
			}
		},
		mounted() {
		  if (this.loginForm.username === '') {
			this.$refs.username.focus()
		  } else if (this.loginForm.code === '') {
			this.$refs.code.focus()
		  }
		},
		methods: {
			handleLogin() {
				this.$refs.loginForm.validate(valid => {
					if (valid) {
					this.loading = true
					this.$store.dispatch('user/smsLogin', this.loginForm)
						.then(() => {
							this.$router.push({ path: this.redirect || '/' })
							this.loading = false
						})
						.catch(() => {
							this.loading = false
						})
					} else {
					console.log('error submit!!')
						return false
					}
				})
			},
			//获取验证码
			getCode(){
				var _this = this;
				var reg = /^1[0-9]{10}$/;
				if(_this.loginForm.username==''){
					Message({
					  message: '请输入手机号码',
					  type: 'error',
					  duration: 5 * 1000
					})
				} else if(!reg.test(_this.loginForm.username)){
					Message({
					  message: '请输入正确的手机号码',
					  type: 'error',
					  duration: 5 * 1000
					})
				} else {
					_this.codeDisabled = true;
					_this.time = 60;
					//获取验证码方法
					smsPhone({
						phone : _this.loginForm.username,
						type: 'LOGIN'
					}).then(res => {
						console.log(res)
						_this.timer();
					})
				}
			},
			timer(){
				var _this = this;
				if (_this.time > 0) {
					_this.time--;
					_this.btntxt = _this.time+"s后重新发送";
					setTimeout(_this.timer, 1000);
				} else{
					_this.time = 0;
					_this.btntxt = "发送验证码";
					_this.codeDisabled = false;
				}
			},
			//滑动登录-成功
			test() {
				this.handleLogin();
			}
		}
	}
</script>

<style scoped lang="scss">
	$bg:#283443;
	$light_gray:#fff;
	$cursor: #fff;
	@supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
		.login-container .el-input input {
			color: $cursor;
		}
	}
	/* reset element-ui css */
	.login-container {
		.el-input {
			display: inline-block;
			height: 47px;
			width: 83%;
			input {
				background: transparent;
				border: 0px;
				-webkit-appearance: none;
				border-radius: 0px;
				padding: 12px 20px;
				color: $light_gray;
				height: 47px;
				caret-color: $cursor;
				&:-webkit-autofill {
					box-shadow: 0 0 0px 1000px $bg inset !important;
					-webkit-text-fill-color: $cursor !important;
				}
			}
		}
		.el-form-item {
			//border: 1px solid rgba(255, 255, 255, 0.1);
			//background: rgba(0, 0, 0, 0.3);
			border-radius: 5px;
			color: #454545;
		}
	}
</style>
<style lang="scss" scoped>
	$bg:#2d3a4b;
	$dark_gray:#889aa4;
	$light_gray:#eee;
	.login-container {
		.tips {
			font-size: 14px;
			color: #fff;
			margin-bottom: 10px;
			span {
				&:first-of-type {
					margin-right: 16px;
				}
			}
		}
		.svg-container {
			padding: 6px 5px 6px 15px;
			color: $dark_gray;
			vertical-align: middle;
			width: 30px;
			display: inline-block;
		}
		.show-pwd {
			position: absolute;
			right: 20px;
			top: 7px;
			font-size: 16px;
			color: $dark_gray;
			cursor: pointer;
			user-select: none;
		}
		.thirdparty-button {
			position: absolute;
			right: 0;
			bottom: 6px;
		}
		@media only screen and (max-width: 470px) {
			.thirdparty-button {
				display: none;
			}
		}
	}
	.getCode{
		position: absolute;
		right: -61%;
		top: 1px;
		width: 52%;
		color: #fff;
		border: 0;
		border-radius: 2px;
		padding: 16px 0;
		background: #6dcdb0;
		cursor: pointer;
	}
	.getCode:disabled {
		background: #eee;
		color: #bbb;
	}
	.center-box{
		width: 100%;
		padding: 20px;
		display: flex;
		flex-flow: row nowrap;
		justify-content: center;
	}
</style>
